<template>
  <div class="Modal">
    <Row class="colLeft">
      <Col :xl="18" :lg="18" :md="18" :sm="18" :xs="24" class="colLeft">
        <div class="conter">
          <div class="bnt acea-row row-middle">
            <Col span="24" class="mb10">
              <Button
                type="primary"
                :disabled="checkPicList.length === 0"
                @click="checkPics"
                class="mr10"
                >使用选中图片</Button
              >
              <Upload
                :show-upload-list="false"
                :action="fileUrl"
                class="mr10 mb10"
                :before-upload="beforeUpload"
                :data="uploadData"
                :headers="header"
                :multiple="true"
                :on-success="handleSuccess"
                style="margin-top: 1px; display: inline-block"
              >
                <Button type="primary">上传图片</Button>
              </Upload>
            </Col>
          </div>
          <div class="pictrueList acea-row">
            <Row :gutter="24" class="conter">
              <div v-show="isShowPic" class="imagesNo" style="width: 100%">
                <Icon type="ios-images" size="60" color="#dbdbdb" />
                <span class="imagesNo_sp">图片为空</span>
              </div>
              <div class="acea-row">
                <div
                  class="pictrueList_pic mr10 mb10"
                  v-for="(item, index) in pictrueList"
                  :key="index"
                >
                  <img
                    :class="item.isSelect ? 'on' : ''"
                    v-lazy="item.img"
                    @click.stop="changImage(item, index, pictrueList)"
                  />
                </div>
              </div>
            </Row>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import Setting from '@/setting'
export default {
  name: 'uploadPictures',
  // components: { editFrom },
  props: {
    isChoice: {
      type: String,
      default: '',
    },
    gridBtn: {
      type: Object,
      default: null,
    },
    gridPic: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      spinShow: false,
      fileUrl: Setting.apiBaseURL + '/systemv1/upload/index',
      modalPic: false,
      treeData: [],
      treeData2: [],
      pictrueList: [],
      uploadData: {
        isz: 0,
      }, // 上传参数
      checkPicList: [],
      uploadName: {
        name: '',
      },
      FromData: null,
      isShow: false,
      treeId: 0,
      isJudge: false,
      buttonProps: {
        type: 'default',
        size: 'small',
      },
      fileData: {
        pid: 0,
        page: 1,
        limit: 12,
      },
      total: 0,
      pids: 0,
      list: [],
      modalTitleSs: '',
      isShowPic: true,
      header: {},
      ids: [], // 选中附件的id集合
    }
  },
  mounted() {
    this.getToken()
  },
  methods: {
    // 上传头部token
    getToken() {
      var upHeaders = {}
      const token = this.$utils.util.cookies.get('system_token')
      if (token) {
        upHeaders['SYSTEM-ACC-TOKEN'] = token
      }
      this.header = upHeaders
    },
    // 删除图片
    editPicList(tit) {},
    // 鼠标移入 移出
    onMouseOver(root, node, data) {
      event.preventDefault()
      data.flag = !data.flag
    },
    // 上传之前
    beforeUpload() {
      this.uploadData = {
        pid: this.treeId,
      }
      let promise = new Promise((resolve) => {
        this.$nextTick(function () {
          resolve(true)
        })
      })
      return promise
    },
    // 上传成功
    handleSuccess(res, file) {
      if (res.code === 200) {
        this.$Message.success('上传成功')
        this.isShowPic = false
        this.pictrueList.push({
          img: res.data.img,
          isSelect: false,
        })
      } else {
        this.$Message.error(res.msg)
      }
    },
    // 关闭
    cancel() {
      this.$emit('changeCancel')
    },
    // 选中图片
    changImage(item, index, row) {
      let selectItem = ''
      this.$set(
        this.pictrueList[index],
        'isSelect',
        item.isSelect === undefined ? true : !item.isSelect
      )
      selectItem = this.pictrueList.filter((item) => {
        return item.isSelect === true
      })
      this.checkPicList = selectItem
      this.ids = []
      this.checkPicList.map((item, index) => {
        this.ids.push(item.img)
      })
    },
    // 点击使用选中图片
    checkPics() {
      if (this.isChoice === '单选') {
        if (this.checkPicList.length > 1)
          return this.$Message.warning('最多只能选一张图片')
        this.$emit('getPic', this.checkPicList[0])
      } else {
        this.$emit('getPicD', this.checkPicList)
        console.log(this.checkPicList)
      }
    },
  },
}
</script>

<style scoped lang="stylus">
.selectTreeClass
    background:#d5e8fc;
.treeBox
    width 100%
    height 100%
    >>> .ivu-tree-title-selected, .ivu-tree-title-selected:hover
         color #2D8cF0 !important
         background-color #fff !important
    >>> .ivu-btn-icon-only
        width 20px !important
        height 20px !important
    >>> .ivu-tree-title:hover
        color #2D8cF0 !important
        background-color #fff !important
.pictrueList_pic
    width 120px
    height 120px
    cursor pointer
    img
      width 100%
      height 100%
.trees-coadd
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    .scollhide
        overflow-x: hidden;
        overflow-y: scroll;
        padding: 10px 0 10px 0;
        box-sizing: border-box;
        .trees
            width: 100%;
            max-height: 374px;
    .scollhide::-webkit-scrollbar
        display: none;
.treeSel >>>.ivu-select-dropdown-list
    padding 0 5px!important
    box-sizing border-box
.imagesNo
    display: flex;
    justify-content: center;
    flex-direction column
    align-items center
    margin: 65px 0;
    .imagesNo_sp
        font-size 13px
        color #dbdbdb
        line-height 3
.Modal{
    width:100%;
    height 100%;background #fff !important;}
.Nav{width:100%;border-right:1px solid #eee;}
.colLeft{padding-right:0!important;height:100%;}
.conter{width:99%; height:100%;}
.conter .bnt{width:100%;padding: 0 13px 10px 15px;box-sizing border-box}
.conter .pictrueList{padding-left:25px;width 100%;}
.conter .pictrueList img{width:100%;border:2px solid #fff;}
.conter .pictrueList img.on{border:2px solid #5FB878;}
.conter .footer{padding:20px;}
</style>
